<template>
  <div>
    <el-dialog
      :title="getShow"
      :visible.sync="visible"
      width="35%"
      @close="closeFn"
    >
      <el-form
        label-width="120px"
        :model="formData"
        :rules="rules"
        validate
        ref="box"
      >
        <el-form-item label="点位名称" prop="name">
          <el-input
          style="width: 100%"
            type="text"
            placeholder="请输入内容"
            v-model="formData.name"
            maxlength="15"
            show-word-limit
            :disabled="display === 'see' ? true : false"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="所在区域" prop="remark">
          <el-select
          style="width: 100%"
            v-model="formData.remark"
            placeholder="请选择"
            :disabled="display === 'see' ? true : false"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在商圈" prop="text">
          <el-select
            v-model="formData.text"
            placeholder="请选择"
           style="width: 100%"
            :disabled="display === 'see' ? true : false"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合作商选择" prop="ownerName">
          <el-select
            v-model="formData.ownerName"
            placeholder="请选择"
            style="width: 100%"
            :disabled="display === 'see' ? true : false"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址" prop="textarea">
          <el-cascader
            style="width: 100%; margin-bottom: 30px"
            v-model="formData.addr"
            :options="options"
            @change="handleChange"
            :disabled="display === 'see' ? true : false"
          ></el-cascader>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="formData.textarea"
            maxlength="40"
            show-word-limit
            :rows="3"
            :disabled="display === 'see' ? true : false"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="closeFn"
          style="background-color: #fbf4f0"
          :class="display === 'see' ? 'show' : ''"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="addRegion"
          :class="display === 'see' ? 'show' : ''"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="header" ref="search">
      <el-form>
        <div class="zzz">
          <el-form-item label="点位搜索：">
            <el-input
              v-model="form.name1"
              style="width: 200px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <div class="xxx">
          <el-form-item label="区域搜索" prop="remark">
            <el-select
              v-model="remark"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in options3"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="ccc">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click.native="searchFN"
            >查询</el-button
          >
        </div>
      </el-form>
    </div>
    <div class="table">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="getArea"
        >新建</el-button
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="点位名称" width="200">
        </el-table-column>
        <el-table-column prop="region.remark" label="所在区域" width="180">
        </el-table-column>
        <el-table-column prop="businessType.name" label="商圈类型" width="180">
        </el-table-column>
        <el-table-column prop="ownerName" label="合作商" width="180">
        </el-table-column>
        <el-table-column prop="addr" label="详细地址" width="200">
          <template v-slot="{ row }">
            <span>{{ row.addr.split('-').at(-1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" id="index">
          <template #default="{ row }">
            <div class="actions">
              <span style="color: blue; cursor: pointer" @click="seeFn(row.id)"
                >查看详情</span
              >
              <span
                style="color: blue; cursor: pointer"
                @click="changeFn(row.id)"
                >修改</span
              >
              <span
                style="color: red; cursor: pointer"
                @click="delRegion(row.id)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="btnspan">
        <span>共{{ totalCount }}条记录</span>
        <span>第{{ pageIndex }}/{{ totalPage }}页</span>
      </div>
      <div class="btnbox">
        <el-button type="primary" class="btn" @click="getUp" :disabled="show"
          >上一页</el-button
        >
        <el-button type="primary" class="btn" @click="getNext" :disabled="show1"
          >下一页</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNode,
  addNode,
  delNode,
  getPartner,
  getNodeCollect,
  getRegion,
  changeNode,
  searchNode
} from '@/api/area'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { getToken } from '@/utils/storage'
export default {
  created () {
    this.getNode()
    this.getNodeCollect()
  },
  data () {
    return {
      form: {
        name1: ''
      },
      remark: '',
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      totalPage: '',
      show1: false,
      show: true,
      visible: false,
      formData: {
        text: '',
        addr: '',
        name: '',
        ownerName: '',
        remark: '',
        textarea: ''
      },
      options1: {},
      options2: {},
      options3: {},
      addForm: {},
      options: regionData,
      rules: {
        text: [{ required: true, message: '请输入所在商圈', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入详细信息', trigger: 'blur' }],
        name: [{ required: true, message: '请输入点位名称', trigger: 'blur' }],
        ownerName: [
          { required: true, message: '请输入合作商', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入所在区域', trigger: 'blur' }
        ],
        textarea: [
          { required: true, message: '请输入所在区域', trigger: 'blur' }
        ]
      },
      display: 'add',
      id: 0
    }
  },
  methods: {
    async getNode () {
      const res = await getNode({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    getNext () {
      this.pageIndex++
      if (this.form.name1 !== '') {
        this.searchFN()
      } else {
        this.getNode()
      }
      if (+this.pageIndex === +this.totalPage) {
        this.show1 = true
      }
      this.show = false
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    getUp () {
      this.pageIndex--
      if (this.form.name1) {
        this.searchFN()
      } else {
        this.getNode()
      }
      if (+this.pageIndex < +this.totalPage) {
        this.show = false
        if (+this.pageIndex === 1) {
          this.show = true
        }
      }
      this.show1 = false
      this.tableData.forEach((item, index) => {
        item.index = index + 1 + (this.pageIndex - 1) * 10
      })
    },
    closeFn () {
      this.visible = false
      this.$refs.box.resetFields()
    },
    getArea () {
      this.visible = true
      this.display = 'add'
      this.formData.text = ''
      this.formData.addr = ''
      this.formData.name = ''
      this.formData.ownerName = ''
      this.formData.remark = ''
      this.formData.textarea = ''
    },
    async addRegion () {
      if (this.display === 'add') {
        await this.$refs.box.validate(async (isOk) => {
          if (isOk) {
            const businessId = this.options1.filter((item, index) => {
              if (this.options1[index].name === this.formData.text) {
                return this.options1[index].id
              }
              return ''
            })
            const ownerId = this.options2.filter((item, index) => {
              if (this.options2[index].name === this.formData.ownerName) {
                return this.options2[index].value
              }
              return ''
            })
            const regionId = this.options3.filter((item, index) => {
              if (this.options3[index].name === this.formData.remark) {
                return this.options3[index].id
              }
              return ''
            })
            const obj = {
              name: this.formData.name,
              addr: this.formData.textarea,
              businessId: businessId[0].id,
              ownerName: this.formData.ownerName,
              // 合作商
              ownerId: ownerId[0].value,
              createUserId: 1,
              regionId: regionId[0].id,
              areaCode: ''
            }
            await addNode(obj)
          }
        })
        this.$message.success('添加成功')
      } else if (this.display === 'pre') {
        await this.$refs.box.validate(async (isOk) => {
          if (isOk) {
            const businessId = this.options1.filter((item, index) => {
              if (this.options1[index].name === this.formData.text) {
                return this.options1[index].id
              }
              return ''
            })
            const ownerId = this.options2.filter((item, index) => {
              if (this.options2[index].name === this.formData.ownerName) {
                return this.options2[index].value
              }
              return ''
            })
            const regionId = this.options3.filter((item, index) => {
              if (this.options3[index].name === this.formData.remark) {
                return this.options3[index].id
              }
              return ''
            })
            const obj = {
              id: this.id,
              name: this.formData.name,
              addr: this.formData.textarea,
              businessId: businessId[0].id,
              ownerName: this.formData.ownerName,
              // 合作商
              ownerId: ownerId[0].value,
              createUserId: 1,
              regionId: regionId[0].id,
              areaCode: ''
            }
            console.log(obj)
            await changeNode(obj)
            this.getNode()
          }
        })
        this.$message.success('修改成功')
      }
      this.$refs.box.resetFields()
      this.visible = false
      this.getNode() +
      this.pageIndex === +this.totalPage
        ? this.show1 = true
        : this.show1 = false
    },
    async delRegion (id) {
      try {
        await this.$confirm('是否确定删除', '提示')
        await delNode(id)
        this.getNode()
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.success('取消成功')
      }
    },
    async changeFn (id) {
      this.id = id
      this.display = 'pre'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          const businessId = this.options1.filter((item1, index) => {
            if (this.options1[index].id === item.businessId) {
              return this.options1[index].name
            }
            return ''
          })
          const regionId = this.options3.filter((item1, index) => {
            if (this.options3[index].id === item.regionId) {
              return this.options3[index].name
            } else {
              return ''
            }
          })
          // console.log(ownerId)
          this.formData.name = item.name
          this.formData.text = businessId[0].name
          this.formData.textarea = item.addr
          this.formData.ownerName = item.ownerName
          this.formData.remark = regionId[0].name
          this.formData.createUserId = item.createUserId
          this.formData.areaCode = item.areaCode
          // this.formData.ownerId = ownerId[0].name
        }
        // changeNode(id)
      })
    },
    seeFn (id) {
      this.display = 'see'
      this.visible = true
      this.tableData.forEach((item) => {
        if (item.id === id) {
          const businessId = this.options1.filter((item1, index) => {
            if (this.options1[index].id === item.businessId) {
              return this.options1[index].name
            }
            return ''
          })
          const regionId = this.options3.filter((item1, index) => {
            if (this.options3[index].id === item.regionId) {
              return this.options3[index].name
            } else {
              return ''
            }
          })
          // console.log(ownerId)
          this.formData.name = item.name
          this.formData.text = businessId[0].name
          this.formData.textarea = item.addr
          this.formData.ownerName = item.ownerName
          this.formData.remark = regionId[0].name
          this.formData.createUserId = item.createUserId
          this.formData.areaCode = item.areaCode
          // this.formData.ownerId = ownerId[0].name
        }
        // changeNode(id)
      })
    },
    async searchFN () {
      if (this.form.name1 === '' && this.remark === '') {
        this.getNode()
        this.$message.success('搜索成功')
        if (+this.pageIndex !== +this.totalPage) {
          this.show1 = false
        }
        console.log(this.show1)
      } else if (this.form.name1 || this.remark) {
        try {
          if (this.form.name1) {
            const res = await searchNode({
              pageIndex: this.pageIndex,
              pageSize: 10,
              name: this.form.name1
            })
            this.$message.success('搜索成功')
            this.tableData = res.currentPageRecords
            this.totalCount = res.totalCount
            this.totalPage = res.totalPage
          } else if (this.form.name1 || this.remark) {
            const regionId = this.options3.filter((item, index) => {
              if (this.options3[index].name === this.remark) {
                return this.options3[index].id
              }
              return ''
            })
            console.log(regionId[0].id)
            const res = await searchNode({
              pageIndex: this.pageIndex,
              pageSize: 10,
              name: this.form.name1,
              regionId: regionId[0].id
            })
            this.$message.success('搜索成功')
            this.tableData = res.currentPageRecords
            this.totalCount = res.totalCount
            this.totalPage = res.totalPage
          }

          if (+this.pageIndex === +this.totalPage) {
            this.show1 = true
          }
          this.tableData.forEach((item, index) => {
            item.index = index + 1 + (this.pageIndex - 1) * 10
          })
        } catch (err) {
          this.$message.error('搜索失败')
          this.getNode()
        }
      }
    },
    handleChange (value) {
      console.log(value)
      this.getCodeToText(null, value)
    },
    getCodeToText (codeStr, codeArray) {
      if (codeStr === null && codeArray === null) {
        return null
      } else if (codeArray === null) {
        codeArray = codeStr.split(',')
      }
      let area = ''
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]]
          break
        case 2:
          area += CodeToText[codeArray[0]] + '/' + CodeToText[codeArray[1]]
          break
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            '/' +
            CodeToText[codeArray[1]] +
            '/' +
            CodeToText[codeArray[2]]
          break
        default:
          break
      }
      console.log(area)
      this.addForm.area = area
      return area
    },
    async getNodeCollect () {
      const res2 = await getPartner()
      this.options1 = res2

      const res = await getNodeCollect()
      this.options2 = res

      const res1 = await getRegion({
        pageIndex: 1,
        pageSize: 50
      })
      this.options3 = res1.currentPageRecords
    },
    // 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions
    projectInfo () {
      const that = this
      this.getProjectInfo({ token: getToken(), id: that.id })
        .then((res) => {
          this.addForm = {
            id: res.id,
            // 基础信息
            p_name: res.p_name, // 项目名
            p_message: res.p_message, // 项目信息
            area: res.area, // 地区
            remark: res.remark // 备注
          }
          console.log(this.addForm)
          this.formData.addr =
            TextToCode[this.addForm.area.split('/')[0]][
              this.addForm.area.split('/')[1]
            ][this.addForm.area.split('/')[2]].code
        })
        .catch((err) => {
          this.$message.error(err)
        })
    }
  },

  computed: {
    getShow () {
      let title = '新增点位'

      if (this.display === 'add') {
        title = '新增点位'
      } else if (this.display === 'see') {
        title = '点位详情'
      } else {
        title = '修改点位'
      }
      return title
    }
  },
  watch: {},
  filters: {}
}
</script>

<style scoped lang="scss">
span {
  margin: 5px;
}
.table {
  width: 100%;
  min-height: 200px;
  margin-top: 20px;
}
.el-button {
  background-color: #ff7730;
  border-color: #ff7730;
  margin-left: 20px;
}
.el-table {
  padding-left: 20px;
}
.btn {
  background-color: #d5ddf8;
  border-color: #d5ddf8;
  color: black;
  width: 100px;
  margin-right: 20px;
}
.btnbox {
  float: right;
  margin-right: 100px;
}
.btnspan {
  color: #dbdfe7;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 10px;
  cursor: hand;
}
/* .el-form {
  width: 400px !important;
} */
.show {
  display: none !important;
}
.header {
  width: 100%;
  height: 60px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  ::v-deep .el-button {
    background-color: #5f84ff !important;
    border-color: #5f84ff !important;
  }
}
.el-button {
  margin-left: 20px;
}
body {
  background-color: #f8fafd;
}
.zzz {
  width: 300px;
  float: left;
}
.xxx {
  width: 300px;

  float: left;
}
.ccc {
  float: left;
}
</style>
<style>
.el-dialog__footer {
  text-align: center !important;
}
</style>
